<template>
  <div class="channel-edit">
    <van-cell center :border=false>
      <template #title>
        <span class="title">我的频道</span>
      </template>
      <van-button plain round type="danger" size="small" @click="isEdit=!isEdit">{{isEdit?'完成':'编辑'}}</van-button>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item
      v-for="(channel,index) in userChannels"
      :icon="(isEdit&&index!==0)?'clear':''"
      :key="channel.id"
      :text="channel.name"
      :class="{activeClass:index===active}"
      @click="delUserChannels(channel,index)"
    />
    </van-grid>
    <van-cell center :border=false>
      <template #title>
        <span class="title">频道推荐</span>
      </template>
    </van-cell>
    <van-grid :gutter="10">
      <van-grid-item  @click="onAdd(channel)" v-for="channel in recomChannnels" :key="channel.id" :text="channel.name" />
    </van-grid>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { getAllChannels, addChannel, deleteChannel } from '@/apis/channel'
import { setItem } from '@/utils/storage'

export default {
  name: 'ChannelEdit',
  props: {
    userChannels: {
      type: Array,
      require: true
    },
    active: {
      type: Number,
      require: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false
    }
  },
  computed: {
    ...mapState([
      'userToken'
    ]),
    recomChannnels () {
      // 全部频道-我的频道
      return this.allChannels.filter((item, index) => {
        return !this.userChannels.find(myChannel => {
          return myChannel.id === item.id
        })
      })
    }
  },
  created () {
    this.loadAllChannels()
  },
  methods: {
    async loadAllChannels () {
      const { data } = await getAllChannels()
      this.allChannels = data.data.channels
    },
    async onAdd (channel) {
      this.userChannels.push(channel)
      // 数据持久化  登录存储线上，未登录存储本地
      if (this.userToken) {
        await addChannel({
          channels: [{ id: channel.id, seq: this.userChannels.length }]
        })
      } else {
        setItem('user-channels', this.userChannels)
      }
    },
    async delUserChannels (channel, index) {
      if (this.isEdit && index !== 0) {
        if (index <= this.active) {
          this.$emit('updateActive', this.active - 1)
        }
        this.userChannels.splice(index, 1)
        // 数据持久化  登录存储线上，未登录存储本地
        if (this.userToken) {
          await deleteChannel(channel.id)
        } else {
          setItem('user-channels', this.userChannels)
        }
      } else {
        // 非编辑切换频道
        this.$emit('choseChannel')
        this.$emit('updateActive', index)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.channel-edit{
  padding-top: 54px;
  .title{
    font-size: 16px;
    color: #333;
  }
  /deep/.van-grid-item__content{
    width: 80px;
    height: 43px;
    background-color: #f4f5f6;
    .van-grid-item__text{
      font-size: 14px;
      color: #222;
      margin-top:0;
    }
  }
   /deep/.van-grid-item__icon{
    position: absolute;
    right: -5px;
    top:-5px;
    font-size: 20px;
    color: #ccc;
    z-index: 100;
  }
  .activeClass{
   /deep/.van-grid-item__text{
       color: red;
    }
  }
}
</style>
